<template>
  <div>
    <div style="float: left; color: #42b983; font-size: 16px; font-weight: 500">
      列表渲染
    </div>
    <div>
      <div>
        <li v-for="(item, index) in items" :key="index">
          {{ item.message }}
        </li>
      </div>
      <a-divider />
      <div>
        <li v-for="(item, index) in items" :key="index">
          <!-- 在 v-for 块中可以完整地访问父作用域内的属性和变量。v-for 也支持使用可选的第二个参数表示当前项的位置索引 -->
          {{ parentMessage }} - {{ index }} - {{ item.message }}
        </li>
      </div>
      <a-divider />
      <div>
        <!-- 有 index 索引时 -->
        <li v-for="({ message }, index) in items" :key="index">
          {{ message }} {{ index }}
        </li>
      </div>
      <a-divider />
      <div>
        <li v-for="(item, index) in itemsList" :key="index">
          <span v-for="(childItem, index2) in item.children" :key="index2">
            {{ childItem.message }} {{ childItem }}
          </span>
        </li>
      </div>
      <a-divider />
      <div>
        <li v-for="(value, key, index) in myObject" :key="index">
          <span> {{ key }} : {{ value }} </span>
        </li>
      </div>
      <a-divider></a-divider>
      <span v-for="(n, index) in 10" :key="index">{{ n }} </span>

      <a-divider></a-divider>
      <!-- 同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。请转阅风格指南查看更多细节 -->
      <!-- 当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名 -->
      <!-- ********************************************************** -->
      <!-- 这会抛出一个错误，因为属性 todo 此时 没有在该实例上定义 -->
      <!-- 
     <li v-for="(todo, index) in todos" v-if="!todo.isComplete" :key="index">
      {{ todo.name }}
    </li>
    -->
      <div v-for="(todo, index) in todos" :key="index">
        <li v-if="!todo.isComplete">
          {{ todo.name }}
        </li>
      </div>

      <a-divider></a-divider>
      <MyComponent v-for="(todo, index) in todos" :key="index"></MyComponent>
      <div>
        <!-- 
            Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括：
            push()、pop()、shift()、unshift()、splice()、sort()、reverse()
            相反 filter()，concat() 和 slice()，这些都不会更改原数组，而总是返回一个新数组
      --></div>
    </div>
  </div>
</template>

<script>
import MyComponent from "./MyComponent.vue";
export default {
  components: {
    MyComponent,
  },
  data() {
    return {
      parentMessage: "Parent",
      items: [{ message: "Foo" }, { message: "Bar" }],
      itemsList: [
        { children: [{ message: "Foo" }] },
        { children: [{ message: "Foo" }] },
      ],
      myObject: {
        title: "How to do lists in Vue",
        author: "Jane Doe",
        publishedAt: "2016-04-10",
      },
      todos: [{ name: 1, isComplete: false }],
    };
  },
};
</script>

<style></style>
